<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 文档选项卡标题Ctrl + / html注释 -->
    <title>初始Html</title>
    <!-- 内部样式表 -->
    <style>
        /*标签选择器 CSS注释 Ctrl + /*/
        div{
            /* px 像素单位 */
            width:100px;
            height:100px;
            background-color: red;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: #ffbbf7;
        }
    </style>
</head>
<!-- 网页主体部分 -->
<body>
    <!-- 标签/元素是构成网页的重要部分
     元素：块级元素 行内元素 
     块级元素特点：
     1.独占一行，宽度默认100%
     2.设置高度生效
     3.高度默认由内容填充
     菜鸟教程
      -->
     <div>块级元素</div>
     <p>段落标签-块级元素</p>
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>
     <!-- 
     行内元素:
     特点:1.与其他行内元素共享一行空间
     2.高度默认由自身内容决定
     3.无法通过css属性设置宽高 设置宽高不生效
     -->
     <span>行内元素</span>
     <span>行内元素</span>
     <em>字体斜体</em>
     <i>字体斜体</i>
     <b>加粗标签</b>
     <strong>加粗标签</strong>
     <a href="">百度一下</a>
     <sub>下标</sub>
     <sup>上标</sup>
</body>
</html>